<template>
    <div class="shakeMain">
        <div class="shakeTit">
            2022年诚赉健康活动规划会议 ( 摇一摇活动排行榜 )
        </div>
        <!-- 摇一摇实时图表  -->
        <div id="shakeEcharts"></div>

        <!-- 摇一摇实时数据 -->
        <el-table :data="shakeData" style="width: 100%" height="350" :header-cell-style="{
            borderTop: '1px solid #f2f2f2', height: '56px', color: '#333', textAlign: 'center', fontWeight: '400', fontSize: '16px',
        }" :cell-style="{ textAlign: 'center', color: '#333', fontSize: '14px', height: '32px' }">
            <el-table-column type="index" label="排行榜" width="100">
            </el-table-column>
            <el-table-column label="参与信息">
                <template slot-scope="scope">
                    <div class="userInfo">
                        <img class="userPhoto" src="../assets/advisory_img1.png" alt=""> {{ scope.row.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="frequency" label="频率">
            </el-table-column>
            <el-table-column label="标识">
                <template slot-scope="scope">
                    <img class="jiangImg" v-if="scope.$index == 0" src="../assets/X2/answer/one.png" alt="第一名">
                    <img class="jiangImg" v-else-if="scope.$index == 1" src="../assets/X2/answer/two.png" alt="第二名">
                    <img class="jiangImg" v-else-if="scope.$index == 2" src="../assets/X2/answer/three.png" alt="第三名">
                    <span v-else></span>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>



<script>
import * as echarts from 'echarts';
export default {
    name: 'shake',
    data() {
        return {
            shakeData: [],
            // x轴
            userList: ['张', '王', '李', '赵', '孙', '周', '钱'],
            // y轴
            shakeNumData: [120, 200, 150, 80, 70, 110, 130]
        }
    },
    created() {
        for (var i = 0; i < 20; i++) {
            this.shakeData.push({
                name: `Yakamo${i}`,
                frequency: 100 + i
            })
        }
    },
    mounted() {
        this.setEcharts()
    },
    methods: {
        setEcharts() {
            var chart = echarts.init(document.getElementById('shakeEcharts'));
            var option = {
                legend: {
                    align: 'right',
                    left: "3%",
                    top: "5%",
                    icon: "circle",
                    textStyle: {
                        color: "#333",
                        fontSize: 14,
                        fontWeight: 600
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    // axisPointer: {
                    //     type: 'cross',
                    //     crossStyle: {
                    //         color: '#999'
                    //     }
                    // },
                    formatter: (params) => {
                        console.log(params);
                        return '<div style="fontSize:12px">' + params[0].axisValue + '<br>' + params[0].marker + '     ' + '摇动次数' + '     ' + params[0].value + '     ' + '次' + '</div>'
                    }
                },

                grid: {
                    left: "5%",
                    top: "25%",
                    right: "5%",
                    bottom: "15%"
                },
                xAxis: {
                    type: 'category',
                    data: this.userList,
                    axisLabel: {
                        textStyle: {
                            color: '#333'
                        },
                        fontSize: 14
                        // formatter: function (value,index) {
                        //     console.log(value);
                        //     return "{Sunny|}"+value+index;
                        // },
                        // rich: {
                        //     value: {
                        //         lineHeight: 48,
                        //         align: 'center'
                        //     },
                        //     Sunny: {
                        //         height: 48,
                        //         align: 'center',
                        //         backgroundColor: {
                        //             image: this.weatherIcons.Sunny
                        //         }
                        //     },
                        // }
                    },
                    "axisTick": {
                        "show": false
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        // 表格里面Y轴线条
                        show: true,
                        lineStyle: {
                            type: 'dashed', //虚线
                            color: '#DCDCDC' //虚线颜色
                        }
                    }
                },
                series: [
                    {
                        name: '签到墙摇一摇页面',
                        data: this.shakeNumData,
                        type: 'bar',
                        barWidth: '30',
                        itemStyle: {
                            // 柱状图的背景色
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#ECA158' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#EB5538' // 100% 处的颜色
                                    }
                                ]
                            }
                        }
                    }
                ]
            };

            chart.setOption(option);
        },
    }
}
</script>

<style lang="less" scoped>
.shakeMain {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 20px 36px 40px;

    ::-webkit-scrollbar {
        display: none;
    }

    .shakeTit {
        margin-left: 16px;
        font-size: 32px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }

    #shakeEcharts {
        margin: 30px 0;
        width: 100%;
        height: 330px;
        background: #FFFFFF;
        border: 1px solid #EEEEEE;
        border-radius: 10px;
    }

    .userInfo {
        display: flex;
        justify-content: center;
        align-items: center;

        .userPhoto {
            margin-right: 18px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
    }
}

.jiangImg {
    width: 50px;
    height: 47px;
}
</style>